<template>
  <div class="infinite-container">
    <div class="flex flex_between topBox">
      <span class="primaryText">就诊人：{{familyPerson.realname}}</span>
      <p class="t1">
        <span>住院号：</span>
        <span>{{illNo}}</span>
      </p>
    </div>
    <div class="mt10"></div>
    <empty v-show = "isEmpty"></empty>
    <div class="bgwhite">
      <mu-list>
        <template v-for="(item, i) in payList">
          <mu-list-item :title="item.payMode" :describeText="item.payedTime" :key="i" @click="gotoDetail(item)">
            <span slot="right" class="feeText">￥{{item.payAmount}}</span>
          </mu-list-item>
          <mu-divider inset :key="i"/>
        </template>
      </mu-list>
    </div>
  </div>
</template>

<script>
  import empty from '@/components/empty'
  import {commonAjax, RESTFUL_API} from '@/api/api'
  export default {
    data () {
      return {
        familyPerson: JSON.parse(sessionStorage.familyPerson || '{}'),
        payList: [],
        illNo: '',
        isEmpty: false
      }
    },
    components: {
      empty
    },
    mounted () {
      const {inHospitalRecordNumber} = this.$route.query
      this.queryPayment(inHospitalRecordNumber)
    },
    methods: {
      queryPayment (inHospitalRecordNumber) {
          let param = {
          patientMedicalCardType: 1,
          patientIdentityCardType: this.familyPerson.cardtype,
          patientIdentityCardNumber: this.familyPerson.idcard,
          inHospitalRecordNumber,
          pageNo: 1,
          pageSize: 1000
        }
        commonAjax(`${RESTFUL_API.listPaymentHistory}`, param, true).then(res => {
              if (res.data.code == 200) {
            let body = res.data.data[0]
            this.isEmpty = false
            this.payList = body.paymentRecord
            this.illNo = body.inHospitalRecordNumber
            for (let i in this.payList) {
              if (this.payList[i].payMode === 1) {
                this.payList[i].payMode = `${this.payList[i].paymentChannel}(支付宝)`
              } else if (this.payList[i].payMode === 2) {
                this.payList[i].payMode = `${this.payList[i].paymentChannel}(微信)`
              } else {
                this.payList[i].payMode = '银联支付' + '(' + this.payList[i].paymentChannel + ')'
              }
            }
          } else {
            this.payList = []
            this.isEmpty = true
          }
        })
      },
      gotoDetail (item) {
        if (!item.tradeNo) {
          return
        }
        // todo
        this.$router.push({
          path: '/inpatient-care/prePayRecordDetail',
          query: Object.assign({illNo: this.illNo, realname: this.familyPerson.realname}, item)
        })
      }
    }
  }
</script>

<style scoped lang="less" scoped>
  @import "../../common/css/flex.css";
  @import "../../common/css/vars";
  @color-feeText:#F7A945;
  .primaryText{
    color:@color-primary
  }
  .topBox{
    padding:10px 20px;
    background-color: white;
  }
  .feeText{
    color:@color-feeText
  }
</style>
